import { todoView } from "./template"
import { findParentNode } from "./untils"
import { addTodo, removeTodo, changeComplete } from "./todoEvent"

export interface ITodoData {
    id: number
    content: string
    completed: boolean
}

class TodoList {
    private oTodoList: HTMLLIElement
    private static instance: TodoList
    constructor(oTodoList: HTMLLIElement) {
        this.oTodoList = oTodoList
    }
   
    public static create(oTodoList: HTMLLIElement) {
        if (!TodoList.instance) {
            return TodoList.instance = new TodoList(oTodoList)
        } else {
            return TodoList.instance
        }
    }

    @addTodo
    public addItem(todo: ITodoData) {
        const oItem: HTMLElement = document.createElement('div')
        oItem.className = 'todo-item'
        oItem.innerHTML = todoView(todo)
        this.oTodoList.appendChild(oItem)

    }

    @removeTodo
    public removeItem(id: number, target: HTMLLIElement) {
        const oItem: HTMLElement = findParentNode(target, 'todo-item')
        oItem.remove()
    }

    @changeComplete
    public toggleComplete(id: number, target: HTMLLIElement) {
        const oItem: HTMLElement = findParentNode(target, 'todo-item')
        const oContent: HTMLElement = oItem.getElementsByTagName('span')[0]
        oContent.style.textDecoration = 'none'
    }

}

export default TodoList